var template_= `
<div class="sectors">
<!--查询 form-->
  <el-form :inline="true" :model="findForm" ref="findform" style="margin-top: 10px"
           class="demo-form-inline" size="mini" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="findForm.name" prefix-icon="el-icon-search" @keyup.enter.native="getData('find')"
                @clear="getData('find')" :clearable="true" placeholder="姓名"></el-input>
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker v-model="findForm.sj" type="year" @change="getData('find')"
                      value-format="yyyy" placeholder="选择日期" style="width: 140px" ></el-date-picker>
    </el-form-item>
    <el-form-item label="类型">
      <el-select v-model="findForm.zd" @change="getSelect" :clearable="true"  placeholder="字段"> <!--multiple allow-create -->
        <el-option
                v-for="(item, index) in findForm.zdlist"
                :key="index" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-select v-model="findForm.nr" @change="getData('find')"
                 filterable allow-create default-first-option :clearable="true"  placeholder="选择"> <!--multiple allow-create -->
        <el-option
                v-for="(item, index) in findForm.nrlist"
                :key="index" :label="item.label" :value="item.value">
          <span style="float: left">{{ item.label }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.num }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>    
      <el-button type="primary" icon="el-icon-search plain" @click="getData('find')">查询</el-button>
    </el-form-item>

    <el-form-item>
      <el-form-item v-if="permissions.add=='1'">
        <el-button type="success" icon="el-icon-plus plain" @click="addData">新增</el-button>
      </el-form-item>
      <el-link href="../mb/建水县各领域（行业）人才信息统计表.xlsx" target="_blank">模板</el-link>
      <el-button-group v-if="permissions.add=='1'">
        <el-button type="file" :loading="uploadBool" @click="uploadBool=true">
          <i class="el-icon-upload2"></i></el-button>
        <el-tooltip class="item" effect="dark" content="导出内容为Excel文件" placement="right-end">
          <el-button type="file" :loading="downBool" @click="exportExcel" >
            <i class="el-icon-download"></i></el-button>
        </el-tooltip>
      </el-button-group>

    </el-form-item>
  </el-form>

  <!--上传 -->
  <el-dialog
          title="上传"
          :visible.sync="uploadBool"
          width="400px">
      数据从第几行开始：<el-input v-model="dataNum" size="mini" style="width: 140px" placeholder="数据开始行数"></el-input>
    <el-upload v-loading="upExcelloading"
            class="upload-demo"
            :headers="auth"
            :show-file-list="false"
            :before-upload="onBeforeUpload"
            :on-success="uploadOK"
            :data="{num:dataNum}"
            drag
            accept=".xlsx"
            :action="action">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
    </el-upload>
  </el-dialog>
<!--显示 table height="745"-->
  <el-table @row-click="rowClick" ref="expandTable" :max-height='tableH - 230'
            :data="tableData" stripe @sort-change="sort_change" v-loading="loading"
            :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandColumn"
            style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="行业"> <span>{{ props.row.type }}</span> </el-form-item>
          <el-form-item label="参加工作时间"> <span>{{ props.row.work_time }}</span> </el-form-item>
          <el-form-item label="政治面貌"><span>{{ props.row.zzmm }}</span> </el-form-item>
          <el-form-item label="入党时间"> <span>{{ props.row.rd_time }}</span></el-form-item>
          <el-form-item label="专业领域"> <span>{{ props.row.specialized }}</span> </el-form-item>
          <el-form-item label="最高学历"><span>{{ props.row.degree }}</span></el-form-item>
          <el-form-item label="学位"><span>{{ props.row.xw }}</span> </el-form-item>
          <el-form-item label="全日制"> <span>{{ props.row.colleges }}</span></el-form-item>
          <el-form-item label="在职"><span>{{ props.row.incumbency }}</span></el-form-item>
          <el-form-item label="备注"> <span>{{ props.row.bz }}</span> </el-form-item>
          <el-form-item label="荣誉称号"> <span>{{ props.row.honor }}</span></el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column type="index" label="序号" width="50"> </el-table-column>
    <el-table-column prop="ID" label="ID" v-if="false" sortable="custom"  ></el-table-column>
    <el-table-column prop="name" label="姓名" width="90" sortable></el-table-column>

    </el-table-column>
    <el-table-column prop="sex" label="性别" width="70" ></el-table-column>
    <el-table-column prop="mz" label="民族"  width="70"></el-table-column>
    <el-table-column prop="brithday" label="出生日期"  width="100"></el-table-column>
    <el-table-column prop="jg" label="籍贯"  width="100" show-overflow-tooltip></el-table-column>

    <el-table-column prop="unit" label="工作单位及职务"  show-overflow-tooltip></el-table-column>
    <el-table-column prop="professional" label="职称"  width="140" show-overflow-tooltip sortable></el-table-column>
    <el-table-column prop="tel" label="手机号码"  width="120" show-overflow-tooltip></el-table-column>
    <el-table-column prop="categories" label="类型"  width="110" show-overflow-tooltip sortable></el-table-column>
    <el-table-column label="操作" fixed="right" width="120">
      <template slot-scope="scope">
        <el-button v-if="permissions.modify=='1'" plain circle type="primary"  icon="el-icon-edit" size="small" @click="handleEdit(scope.row)"></el-button>
        <el-button v-if="permissions.del=='1'" plain type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <CustomizePagination :page="currentPage" :total=pageTotal :size="pageSize"
     @page-change="handlePageChange" />

<!--新增，修改-->
  <el-dialog :visible.sync="editDialogVisible" width="70%" top="3vh" title="">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData"  size="medium" label-width="120px">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入姓名" :maxlength="11" show-word-limit
                      clearable prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请输入性别" clearable>
              <el-option v-for="(item, index) in sexData" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="mz">
            <el-select v-model="formData.mz" placeholder="请输入民族"  filterable  clearable>
              <el-option v-for="(item, index) in mzList" :key="index" :label="item.label"
                         :value="item.label" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="brithday">
            <el-date-picker v-model="formData.brithday" :format="sjFormat" type="month"
                            :style="{width: '100%'}" placeholder="请输入出生年月" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="籍贯" prop="jg">
            <!---<el-input v-model="formData.jg" placeholder="请输入籍贯" clearable :style="{width: '100%'}"></el-input>-->
            <el-cascader :options="pcaTextArr" filterable clearable v-model="formData.jg">
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参加工作时间" prop="work_time">
            <el-date-picker v-model="formData.work_time" :format="sjFormat" type="month"
                            placeholder="请输入参加工作时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="政治面貌" prop="zzmm">
            <el-select v-model="formData.zzmm" placeholder="请输入政治面貌" filterable allow-create default-first-option clearable>
              <el-option v-for="(item, index) in zzmm" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入党时间" prop="rd_time">
            <el-date-picker v-model="formData.rd_time"  :format="sjFormat" type="month"
                            :style="{width: '100%'}" placeholder="请输入入党时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业领域" prop="specialized">
            <el-input v-model="formData.specialized" placeholder="请输入专业领域" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高学历" prop="degree">
            <el-select v-model="formData.degree" placeholder="请输入最高学历" filterable allow-create default-first-option clearable>
              <el-option v-for="(item, index) in degree" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学位" prop="xw">
            <el-select v-model="formData.xw" placeholder="请输入学位" filterable allow-create default-first-option clearable>
              <el-option v-for="(item, index) in xw" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="tel">
            <el-input v-model="formData.tel" placeholder="请输入手机号码"
                      onkeyup="value=value.replace(/[^\d]/g,'')" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="200px" label="毕业院校及专业（全日制）" prop="colleges">
            <el-input v-model="formData.colleges" placeholder="请输入毕业院校及专业毕业院校及专业" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="200px" label="毕业院校及专业（在职）" prop="incumbency">
            <el-input v-model="formData.incumbency" placeholder="请输入毕业院校及专业" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作单位及职务" prop="unit">
            <el-input v-model="formData.unit" placeholder="请输入工作单位及职务" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职称" prop="professional">
            <el-input v-model="formData.professional" placeholder="请输入职称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="200px" label="获得州级及以上荣誉称号" prop="honor">
            <el-input v-model="formData.honor" placeholder="请输入获得州级及以上荣誉称号" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="类型" prop="categories">
            <el-select v-model="formData.categories" placeholder="类型" filterable allow-create default-first-option clearable>
              <el-option v-for="(item, index) in categories" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业" prop="type">
            <el-select v-model="formData.type" placeholder="请输入行业" filterable allow-create default-first-option clearable>
              <el-option v-for="(item, index) in type" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item  label="备注" prop="bz">
            <el-input v-model="formData.bz" placeholder="请输入备注" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div align="right">
      <el-button @click="editDialogVisible=false">取消</el-button>
      <el-button type="primary" @click="handelEdidSave">确定</el-button>
    </div>
  </el-dialog>
</div>
`
//import  '../js/xlsx.full.min.js'  //第一种方式
//import '../js/excel.js'  //第一种方式
//import styles from  "./sectors.css";

// var script = document.createElement('script');
// script.src = 'js/xlsx.full.min.js'; 
// document.head.appendChild(script);

// var script = document.createElement('script');
// script.src = 'js/excel.js'; 
// document.head.appendChild(script);

var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'views/sectors.css'; 
document.head.appendChild(css);

//https://blog.csdn.net/yunchong_zhao/article/details/103792418
var css = document.createElement('link');
css.rel = 'stylesheet';
css.href = 'css/icon/iconfont.css'; 
document.head.appendChild(css);

export default {
  name: 'sectors',
  data() {
    return {
      tableH:0,
      findForm: {
        name: '',
        sj:'',
        zdlist:sectorList,  //自定义 固定
        nrlist:'',      //动态获取
        zd:'categories',
        nr:'',
      },
      sjFormat:sjFormat,
      action:"controller/sectors.php?lx=uploadExel",
      dataNum:"4",  //上传数据开始行数
      uploadBool:false, //uploadExcelClick
      auth:{
        Authorization:'Bearer' +' ' + sessionStorage.getItem("token")
      },
      downBool:false, //导出内容为Excel文件
      upExcelloading:false,

      find:"",
      tableData: [],
      loading: false,
      pageList:[12, 24, 36],
      pageSize:12,
      currentPage:1,
      pageTotal:0,
      sort:'id',
      order:'desc',

      expands: [], // 只展开一行放入当前行id  https://blog.csdn.net/keke11211/article/details/121899394
      getRowKeys: (row) => { // 获取当前行id
          return row.id; // 这里看这一行中需要根据哪个属性值是id
      },

      editDialogVisible: false, //新增，修改
      isEditOrAdd:'',
      pcaTextArr:elementChinaAreaData.pcaTextArr, //籍贯
      formData: {},
      sexData:sexList1,
      zzmm:zzmmList,
      mzList:nationList,
      degree:degreeList,
      type:bmList,
      categories:typeList,
      xw:xwList,
      //fileCancle:true,
      permissions:{}
    }
  },
  methods: {
    getData(v) {
      if (v=='find')  //点【查询】时，要从第一页开始
        this.currentPage=1

      this.loading=true
      axios.post('controller/sectors.php?lx=GetListData', { //listSector
        userInfo:this.userInfo,
        table:'sectors',
        Find:this.findForm,
        page:this.currentPage,
        size:this.pageSize,
        sort:this.sort,
        order:this.order,
      }).then((res) => {
        if (res.data.code==200) {
          this.loading=false
          this.pageTotal=parseInt(res.data.total)
          this.tableData=res.data.data     
          this.permissions=res.data.permissions  //增删修 权限
        }
      });
      
    },
    async getSelect() {
      
      let res=await axios.post('controller/data.php?lx=getSelect', {
        table:'sectors',
        zd:this.findForm.zd,
      })

      if (res.data.code==200) {
        this.findForm.nr=''
        this.findForm.nrlist=res.data.data

        // this.findForm.nr=res.data.data[0].value
        // this.getData()
      }
     
    },
    handleDelete(item){
      console.log(item)
      this.$confirm('是否要确实删除【'+item.name+'】?', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        console.log("dell")
        axios.post('controller/data.php?lx=del', {
          table:'sectors',
          id: item.id,
        }).then((res) => {
          this.$message({
            message: res.data.message,
            type: 'success',
          });
          this.getData()
        });
      }).catch(()=>{});
    },
    select_chang(val){  //el-select @change
      this.findForm.type=val
      this.getData()
    },
    handlePageChange(val,size){
      this.currentPage=val
      this.pageSize=size
      this.getData()
    },
    sort_change(column, prop, order){
      this.sort=column.prop
      this.order=column.order=="descending"?"DESC":"ASC"
      this.getData()
    },
    rowClick(row, column, event){
      if(column.label!="操作"){
        this.$refs.expandTable.toggleRowExpansion(row, row.expanded);
      }
    },
    expandColumn(row, expandedRows) { // 每次只展开一行        
        let that = this;
        if (expandedRows.length) {
            that.expands = []
            if (row) {
              that.expands.push(row.id)
            }
        } else {
            that.expands = []
        }
    },
    addData(){  //1新增
      this.isEditOrAdd='add'
      this.editDialogVisible = true

      //https://blog.csdn.net/Dream_xiaojin/article/details/101295923
      //1、清空formData对像
      Object.keys(this.formData).forEach(key => this.formData[key] = '');
      this.formData.jg=["云南省","红河哈尼族彝族自治州","建水县"]   //默认值
      //2、点编辑后，会把 ID,CreatedAt。。。这些赋值给 formData
      delete this.formData['ID']  //新增时一定要把 ID删除！！

    },
    handleEdit(item) {  //1修改

      console.log("brithday-----",item.brithday)

      this.isEditOrAdd='edit'
      this.editDialogVisible = true
      //this.formData = Object.assign({},item);   //对象的浅拷贝
      //this.formData={...item,sex:""} //生成新的对像  sex会覆盖
      this.formData={...item}
     // this.formData=item
      if (this.formData.jg.constructor !== Array)
        this.formData.jg=this.formData.jg.split(",")

      console.log("--edit-",this.formData)
    },
    handelEdidSave(val) {//2新增、修改的保存
 
      //value-format="yyyy-MM-dd" 没有用这个 ,因为数据库中的数据不是规范的这种 2000-01-01
      this.formData.brithday=renderTime(this.formData.brithday);
      this.formData.work_time=renderTime(this.formData.work_time);
      this.formData.rd_time=renderTime(this.formData.rd_time);

      if (this.formData.jg.constructor === Array)
        this.formData.jg=this.formData.jg.join() // ["云南省","建水县"] 转为 "云南省,建水县"

      axios.post('controller/sectors.php?lx=sectorEditSave&type='+this.isEditOrAdd, 
        this.formData).then((res) => {
        this.$message({
          message: res.data.message,
          type: res.data.code=='200'?'success':'danger'
        });
        this.getData()
        this.editDialogVisible = false
      });
    },
    onBeforeUpload(){ //-----------上传
      this.upExcelloading="true"
    },
    uploadOK(res){
      this.$message({
        message: res.message,
        type: res.code=='200'?'success':'danger'
      });
      this.uploadBool=false

      // if(res.error.length>1){
      //   this.$notify({
      //     title: '没有导入情况',
      //     dangerouslyUseHTMLString: true,
      //     type:'danger',
      //     message: res.error,
      //     duration: 0
      //   });
      // }

      this.getData()
    },
    dr(){
      axios.post('controller/dr.php').then((res) => {
        //点击下载
        console.log(res);
      });
    },
    exportExcel(){  //导出excel
      this.downBool=true
      axios.post('controller/dc.php', {
        table:'sectors',
        Find:this.findForm,
      }).then((res) => {
        //点击下载
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '导出成功，<a href='+res.data.path+' target="_blank">点击</a>下载',
          type: res.data.code=='200'?'success':'danger'
        });
        //自动下载
        if(res.data.code=="200") {
          window.open(res.data.path)
        }
        this.downBool=false
      });

      // excelJson=[['姓名', '性别', '学校','身份证']]
      // for(const item of this.tableData){
      //   const temp=[item.name,item.sex,item.unit,item.tel]
      //   excelJson.push(temp)
      // }
      // const sheet=XLSX.utils.aoa_to_sheet(excelJson)
      // openDownloadDialog(sheet2blob(sheet), '导出.xlsx')


    },

  },
  created(){
    this.tableH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   
    this.userInfo=JSON.parse(sessionStorage.getItem('userInfo'))
    console.log("-this.userInfo--",this.userInfo)
   
  },
  mounted(){
    this.getData()
    this.getSelect()
  }, 
  components:{
    //CustomizePagination : pg,  //第一种方式
    CustomizePagination : () => import('../components/pagination.js')  //第二种方式
  },
  template:template_,
}

